<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{https://use.fontawesome.com/releases/v5.3.1/css/all.css}" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Poppins:300,400,800}">
    <!-- orion icons-->
    <link rel="stylesheet" th:href="@{/css/orionicons.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.default.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.png?3}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page-holder d-flex align-items-center">
      <div class="container">
        <div class="row align-items-center py-5">
          <div class="col-5 col-lg-7 mx-auto mb-5 mb-lg-0">
            <div class="pr-lg-5"><img src="img/illustration.svg" alt="" class="img-fluid"></div>
          </div>
          <div class="col-lg-5 px-lg-4">
            <h1 class="text-base text-primary text-uppercase mb-4">Bubbly Dashboard</h1>
            <h2 class="mb-4" th:text="#{login.welcome}"></h2>
            <p class="text-muted" th:text="#{login.slogan}"></p>
            <form id="loginForm" th:action="@{/loginCheck}"  class="mt-4">
              <div class="form-group mb-4">
                <input type="text" name="username" th:placeholder="#{login.username_plhd}" class="form-control border-0 shadow form-control-lg">
              </div>
              <div class="form-group mb-4">
                <input type="password" name="password" th:placeholder="#{login.password_plhd}" class="form-control border-0 shadow form-control-lg text-violet">
              </div>
              <div class="form-group mb-4">
                <div class="custom-control custom-checkbox">
                  <input id="customCheck1" type="checkbox" checked class="custom-control-input">
                  <label for="customCheck1" class="custom-control-label" th:text="#{login.remember}"></label>
                </div>
              </div>
              <button type="submit" class="btn btn-primary shadow px-5" th:text="#{login.login_btn}"></button>
            </form>
            <br/>
            <a class="btn btn-info" th:href="@{/login.html(lang='zh_CN')}">中文</a>
            <a class="btn btn-info" th:href="@{/login.html(lang='en_US')}">English</a>
          </div>
        </div>
        <p class="mt-5 mb-0 text-gray-400 text-center">Copyright &copy; 2019.Company name All rights reserved.More Templates & Your company</p>
        <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)                 -->
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="js/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="js/Chart.min.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/front.js"></script>
  </body>
</html>